<template>
    <d2-container>
        <el-main>
            <el-form  :model="course" ref="course" :rules="formRules">

                <el-form-item label="课程名称" prop="name">
                    <el-input placeholder v-model="course.name" :disabled="disabled"></el-input>
                </el-form-item>


                <el-form-item label="课程备注" prop="remark">
                    <el-input placeholder v-model="course.remark" :disabled="disabled"></el-input>
                </el-form-item>


                <el-form-item label="课程时长（小时）" prop="duration">
                    <el-input placeholder type='number' v-model.number="course.duration" :disabled="disabled" min='0'></el-input>
                </el-form-item>

                <el-form-item label="单节课时价格（元）" prop="pricePerClass">
                    <el-input placeholder type='number' v-model.number="course.pricePerClass" :disabled="disabled" min='0'></el-input>
                </el-form-item>


                <el-form-item label="每小时价格（元）" prop="pricePerHour">
                    <el-input placeholder type='number' v-model.number="course.pricePerHour" :disabled="disabled" min='0' max='12'></el-input>
                </el-form-item>

                <el-form-item label="每月价格（元）" prop="pricePerMonth">
                    <el-input placeholder type='number' v-model.number="course.pricePerMonth" :disabled="disabled" min='0' max='12'></el-input>
                </el-form-item>

                <!-- <el-form-item label="开设院校" prop="school">
                    
                    <el-checkbox-group v-model="course.school" :disabled="disabled">
                        <el-checkbox-button v-for="school in option.schoolList" :label="school._id" :key="school._id">
                            {{school.name}}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item> -->

                <el-form-item label="课程类型" prop="courseType">
                    <el-checkbox-group v-model="course.courseType" :disabled="disabled">
                        <el-checkbox-button v-for="o_courseType in option.courseTypeList" :label="o_courseType._id"
                                            :key="o_courseType._id">{{o_courseType.name}}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

            </el-form>
        </el-main>
        <el-footer>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="edit" v-show="editShow">修改</el-button>
        </el-footer>
    </d2-container>
</template>
<script>
    import request from "@/plugin/axios";
    import {mapState} from "vuex";
    export default {
        data() {
            return {

                option: {
                    courseTypeList: undefined,
                    schoolList: undefined
                },
                id : undefined,
                course: {
                    name: undefined,
                    courseType: [],
                    school: [],
                    duration:undefined,
                    payByTimes:undefined,
                    payByMoney:undefined,
                },
                disabled: false,
                editShow :false,
                formRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    studentId: [
                        {required: true, message: '请输入学号', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择学生性别', trigger: 'change'}
                    ],
                    age: [
                        {required: true, message: '请输入家长年龄', trigger: 'change'},
                        {type: 'number', min: 5, max: 100, message: '年龄范围在5-100之间', trigger: 'change'}

                    ],
                    school: [
                        {required: true, message: '请选择所在校区', trigger: 'change'}
                    ],
                    payType: [
                        {required: true, message: '请选择付费类型', trigger: 'change'}
                    ],
                   
                   
                    pricePerClass: [
                        {required: true, message: '课程价格不能为空', trigger: 'change'},
                        {type: 'number', min:0, message: '请输入正数', trigger: 'change'}

                    ],
                    pricePerMonth: [
                        {required: true, message: '每月价格不能为空', trigger: 'change'},
                        {type: 'number', min:0,message: '请输入正数', trigger: 'change'}

                    ],
                    pricePerHour: [
                        {required: true, message: '每小时价格不能为空', trigger: 'change'},
                        {type: 'number', message: '请输入数字', trigger: 'change'}

                    ],
                    priceType:[
                        {required: true, message: '请选择收费方式', trigger: 'change'}
                    ],
                    maxNumber: [
                        {required: true, message: '开课最大成员数量不能为空', trigger: 'change'},
                        {type: 'number', message: '请输入数字', trigger: 'change'}

                    ],
                    duration: [
                        {required: true, message: '开课时长不能为空。半小时为0.5', trigger: 'change'},
                        {type: 'number', min: 0, max: 12,message: '最大为12小时', trigger: 'change'}

                    ],

                },

            };
        },
        computed: {
            ...mapState('d2admin/user', ['info']),
        },
        methods: {

            submit() {
                let url = ''
                if (this.id){
                    this.course._id = this.id
                    this.course.course = this.id
                    url = "/course/updateCourse"
                }
                else{
                    url = "/course/addCourse"
                }
                
                request({
                    url: url,
                    method: "post",
                    data: this.course
                }).then(res => {
                    if (res.code == 200) {
                        this.refresh = true
                        


                        this.$alert("", "提交课程信息成功", {
                            confirmButtonText: "确定"
                        });
                        this.course = {}
                        this.$router.push({path:"/course-list"})
                    }
                    // 返回数据
                });
            },
            edit(){
                this.editShow = true
                this.disabled = false
            },
            getSchoolList() {
                this.option.schoolList = this.info.school;
            },
            getCourseTypeList() {
                let data = {};
                (data.page = 1), (data.pageSize = 999999);
                data.school = this.school
                request({
                    url: "/courseType/getCourseTypeList",
                    method: "post",
                    data
                }).then(res => {
                    this.option.courseTypeList = res.data.courseType;
                    // 返回数据
                });
            },
            getOneCOurse(){
                request({
                    url: "/course/getOneCourse",
                    method: "post",
                    data : {id:this.id}
                }).then(res => {
                    this.course = res.data
                    // 返回数据
                });
            },

        },
        beforeRouteLeave(to,from,next){
        if (this.refresh){
          to.meta.refresh = 'a'
          this.refresh = undefined
        }
        if (this.id == undefined){
            from.meta.keep = true
            from.meta.course = this.course
        }

        next()
        },
        beforeRouteEnter(to,from,next){
            if (to.meta.keep){
                to.meta.keep = undefined
                next(v=>{
                  v.course = to.meta.course
                  to.meta.course = undefined
                })
            }
            else{
                next()
            }

        },
        
        created() {
            this.school = this.info.school[0]._id
            this.course.school = this.school
            // this.getSchoolList()
            this.getCourseTypeList()
            if (this.$route.query.id != undefined){
                this.id = this.$route.query.id
                this.editShow = true
                this.disabled = true
                this.getOneCOurse()
            }
        }
    };
</script>
